<template>
	<view>
		<!-- 最上面的教室选择 -->
		<u-tabs  style="height: 80rpx;" :current="current" :list="xiaoqu" 
			scroll-y="true" lineWidth="50" lineColor="blue"
			:activeStyle="{ color: 'black',  transform: 'scale(1)'}"
			:inactiveStyle="{color: '#606266',transform: 'scale(0.9)'}"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="change">
		</u-tabs>
		
		<view  v-for="(item,index) in detaillist1" :index="item" :key="index" >
			<view style="display: flex;width: 95%;margin: 20rpx auto;box-shadow: 0 0 20rpx #ececec;border-radius: 15rpx;">
				<view style="display: flex; width: 100%;margin: 15rpx;">
					<view style="display: flex;flex:4;flex-direction: column;font-size: 28rpx;color: dimgrey;">
						<view style="display: flex;flex-direction: row;">
							<text style="font-weight: bold;font-size: 30rpx;color: black;">类别：</text>{{item.leibie}}
							<text style="font-weight: bold;margin-left: 20rpx;font-size: 30rpx;color: black;">收/支：</text>{{item.biandong}}
							<text style="font-weight: bold;margin-left: 20rpx;font-size: 30rpx;color: black;">金额：</text>{{item.jine}}
						</view>
						<view style="margin-top: 10rpx;"> 
							<text style="font-weight: bold;font-size: 30rpx;color: black;">详情：</text>{{item.detail}}
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-weight: bold;font-size: 30rpx;color: black;">校区：</text>{{item.xiaoqu}}
							<text style="font-weight: bold;font-size: 30rpx;color: black;margin-left: 20rpx;">经手人：</text>{{item.jingshouren}}
						</view>
						<view style="margin-top: 10rpx;" >
							<text style="font-weight: bold;font-size: 30rpx;color: black;">日期：</text>{{item.riqi}}
						</view>
						<!-- <view style="margin-top: 10rpx;">
							<text style="font-weight: bold;">校区：</text>{{item.xiaoqu}}
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-weight: bold;">备注：</text>{{item.beizhu}}
						</view> -->
					</view>
					<!-- <view style="display: flex;flex:1;justify-content: end;align-items: center;margin-right: 15rpx;">
						{{item.jine}}元
					</view> -->
				</view>
			</view>
		</view>
		
		<model v-if='detailshow' @colseModel='detailshow = false'>
			<view style="display: flex;flex-direction: row;align-items: center;margin: 20rpx 10rpx 0 0;">
				<text style="color: blue;font-weight: 500;">金额：</text>
				<uni-easyinput  type="number" v-model="jine" placeholder="请输入金额"/>
			</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin: 20rpx 10rpx 0 0;">
				<text style="color: blue;font-weight: 500;">收/支：</text>
				<picker @change="bindPickerChange"  :range="shouzhi" style="width: 80%;" >
					<uni-easyinput type="text" v-model="biandong" placeholder="请选择收入还是支出"  suffixIcon="bottom"/>
				</picker>
			</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin: 20rpx 10rpx 0 0;">
				<text style="color: blue;font-weight: 500;">类别：</text>
				<picker @change="xuanleibie"  :range="leibielist" style="width: 80%;" >
					<uni-easyinput type="text" v-model="leibie" placeholder="请选择所属类别"  suffixIcon="bottom"/>
				</picker>
			</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin: 20rpx 10rpx 0 0;">
				<text style="color: blue;font-weight: 500;">详情：</text>
				<uni-easyinput  type="textarea" v-model="detail" placeholder="请输入本金额详情"/>
			</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin: 20rpx 10rpx 0 0;">
				<text style="color: blue;font-weight: 500;">校区：</text>
				<picker @change="xiaoquxuanze"  :range="xiaoqulist" style="width: 80%;">
					<uni-easyinput  type="text" v-model="xiaoqu2" placeholder="请选择校区" suffixIcon="bottom"/>
				</picker>
			</view>	
			<view style="display: flex;flex-direction: row;align-items: center;margin: 20rpx 10rpx 0 0;">
				<text style="color: blue;font-weight: 500;">备注：</text>
				<uni-easyinput  type="text" v-model="beizhu" placeholder="请输入备注信息"/>
			</view>
			<view style="display: flex;width: 60%;justify-content: space-around;margin: 30rpx auto;">
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;color: white;" @click="detailshow = false">取消</view>
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;color: white;" @click="tijiao()">确定</view>
			</view>
		</model>
		
	</view>
</template>

<script>
	import model from '../../components/model.vue'
	import getDateTime from '@/common/getdateTime.js'; 
	export default {
		components: {
			model
		},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				current:0,
				xiaoqu:[],
				xiaoqu2:'',
				tiaoshu:20,
				page:1,
				ReachBottom:0,
				beizhu:'',
				detail:'',
				jine:'',
				detailshow:false,
				biandong:'',
				leibie:'',
				xiaoqu1:false,//选择校区是否不能输入 
				shu:'提交',
				show1:false,//修改时课程名字不能改
				ip:'',//判断修改还是新增
				imageStyles: {
					width: 100,
					height: 100,
					border: {
					color:"blue",
					width:2,
					style:'dashed',
					radius:'12px'
					}
				},
				item:{},
				date: currentDate,
				name:'',
				age:'',
				zhuzhi:'',
				kecheng:'',
				nianji:'',
				school:'',
				tel:'',
				nianji:'',
				baomingdate:'',
				jiezhidate:'',
				kechengshu:'',
				yihexiaoshu:0,
				money1:'',
				shoufeifangshi:'',
				kecheng:'',
				zhaopian:'',
				kechenglist:[],//从数据库中获取课程的LIST
				kechenglist1:[],
				xiaoqulist:[],//从数据库中获取校区LIST
				info:[],//获取要修改学生的信息
				shouzhi:["支出","收入"],
				leibielist:["类别一","类别二"],
				detaillist1:[]
			}
		},
		onNavigationBarButtonTap() {
			if(this.meiyi_userinfo.permission.indexOf("add_caiwushuju")!=-1){
				this.tianjialiushuilist()
			}else{
				uni.showToast({
					title: '请联系管理员开通权限！',
					icon: 'none',
					duration: 1000
				})
			}
			
		},
		// 上拉触底
		onReachBottom() {
			if(this.ReachBottom==1){
				return uni.showToast({
					title: '已到最后一页',
					icon: 'none',
					duration: 3000
				})
			}
			this.page += 1
			this.detaillist()
		},
		async onLoad() {
			this.meiyi_userinfo=await uniCloud.getCurrentUserInfo()
			let meiyi_name_tel=await uni.getStorageSync('meiyi_name_tel')
			this.jingshouren=meiyi_name_tel.name+meiyi_name_tel.mobile
			var timeStr = getDateTime.dateTimeStr('y-m-d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
						this.baomingdate = timeStr
			this.xiaoqufun()
		},
		methods: {
			// 点击不同的校区时
			change(e){
				this.xiaoqu_zhanshi=[]
				if(e.name=='全部'){
					this.xiaoqu_zhanshi=this.wodexiaoqu
				}else{
					this.xiaoqu_zhanshi.push(e.name)
				}
				this.detaillist()
			},
			// 获取校区的信息
			async xiaoqufun(){
				const res=await uni.getStorageSync('aoyashengxiaoqu')
				this.xiaoqu=[]
				let arr=[]
				for(var i=0;i<res.result.data.length;i++){
					var cou=0
					for(var j=i+1;j<res.result.data.length;j++){
						if(res.result.data[i].name==res.result.data[j].name){
							cou=9
							break
						}
					}
					if(cou==0){
						this.xiaoqu.push(res.result.data[i])
						arr.push(res.result.data[i].name)
					}
				}
				this.wodexiaoqu=arr
				if(this.xiaoqu.length>1){
					this.xiaoqu.unshift ({
						name:'全部'
					})	
				}else{
					this.shu3=this.xiaoqu[0].name
				}	
				this.xiaoqu_zhanshi=this.wodexiaoqu
				this.detaillist()
			},
			bindPickerChange(e){
				if(e.detail.value==0){
					this.biandong="支出"
				}else{
					this.biandong="收入"
				}
				
			},
			//把财务明细添加到数据库中
			tijiao(){
				if(!this.jine | !this.shouzhi | !this.leibie | !this.detail | !this.xiaoqu2){
					return uni.showToast({
						title:"请填写每一项！",
						icon:'none',
						duration:1000
					})
				}
				uni.showLoading({
					title:"数据提交中……",
					mask:true
				})
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:20,//类型为20时，把财务明细添加到数据库中
						jine:this.jine,
						biandong:this.biandong,
						leibie:this.leibie,
						detail:this.detail,
						riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
						jingshouren:this.jingshouren,
						xiaoqu:this.xiaoqu2,
						beizhu:this.beizhu
					}
				}).then(res=>{
					this.detailshow=false
					this.jine=this.biandong=this.leibie=this.detail=this.riqin=this.xiaoqu=this.beizhu=''
					this.detaillist()
				})
			},
			//显示添加流水明细
			tianjialiushuilist(){
				this.detailshow=true
				
			},
			//展示财务流水
			detaillist(){
				uni.showLoading({
					title:"数据加载中……",
					mask:true
				})
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:19,//类型为19时，获取我的收支明细
						skip:(this.page-1)*this.tiaoshu,
						tiaoshu:this.tiaoshu,
						weizhi:this.xiaoqu_zhanshi,
						shenfen:this.meiyi_userinfo.role.indexOf("guanliyuan")==-1?'':'管理员',
						jingshouren:this.jingshouren
					}
				}).then(res=>{
					// res 为数据库查询结果
					uni.hideLoading()
					if(res.result.data.length==0 && this.page!=1){
						this.ReachBottom=1
						return uni.showToast({
							title: '已到最后一页',
							icon: 'none',
							duration: 3000
						})
					}
					if(this.page==1 && res.result.data.length==0){
						return uni.showToast({
							title: '未搜索到信息',
							image:'../../static/jinggao.png',
							duration: 3000
						})
					}
					if(this.page==1){
						this.detaillist1=res.result.data
						this.scrollToTop()
					}else{
						this.detaillist1.push(...res.result.data)
					}
					
					
					
				})
			},
			scrollToTop(){
				uni.pageScrollTo({
					scrollTop: 0,   // 滚动到页面的目标位置（单位px）
					duration: 0   // 滚动动画的时长，默认300ms，单位 ms
				});
			},
			
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			xuanleibie(e){
				this.leibie=this.leibielist[e.detail.value]
			},
			//选择校区
			xiaoquxuanze: function(e) {//选择校区，根据校区选出课程
				    this.xiaoqu2 = this.xiaoqulist[e.detail.value]
					if(this.ip==1){
						return
					}	
					this.kechenglist1=[]
					this.kecheng=''
					this.kechenglist.map(item => {
						if(item.xiaoqu==this.xiaoqu2){
							this.kechenglist1.push(item.name)
						}	
					})
				},
		
		}
	}
</script>

<style>

</style>
